<template>
	<div>
		<div class="downloadmain">
			<img src="../assets/maskback.png" class="downloadimg">
			<div class="downloadcon">
				<div class="compylogo"><img src="../assets/compylogo.png"></div>
				<div class="downmodule">
					<div class="samebutton" v-show="iphonedown" @click="iosbut"><i class="samelogo iphoneimg"></i>iphone用户下载</div>
					<div class="samebutton" v-show="androidown" @click="androidbut"><i class="samelogo androidimg"></i>Android用户下载</div>
				</div>
			</div>
		</div>
		<div class="maskcon" v-show="hidemask"><img src="../assets/wxmask.png"></div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				hidemask: false,
				iphonedown: true,
				androidown: true
			}
		},
		created() {
			var browser = {
				versions: function() {
					var u = navigator.userAgent,
						app = navigator.appVersion;
					return { //移动终端浏览器版本信息
						trident: u.indexOf('Trident') > -1, //IE内核
						presto: u.indexOf('Presto') > -1, //opera内核
						webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
						gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
						mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
						ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
						android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
						iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
						iPad: u.indexOf('iPad') > -1, //是否iPad
						webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
					};
				}(),
				language: (navigator.browserLanguage || navigator.language).toLowerCase()
			}
			if(browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
				var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
				if(ua.match(/MicroMessenger/i) == "micromessenger") {
					this.hidemask = false;
				}
				if(browser.versions.ios) {
					//是否在IOS浏览器打开
					this.androidown = false;
				}
				if(browser.versions.android) {
					//是否在安卓浏览器打开
					this.iphonedown = false;
				}
			}
		},
		methods: {
			androidbut: function() {
//				window.location.href = "http://www.uhuijia.com.cn/mall.apk"
				window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.huifaapp.mall&from=singlemessage"
			},
			iosbut:function(){
				window.location.href = "https://itunes.apple.com/cn/app/%E5%8F%8B%E6%83%A0%E5%AE%B6/id1278845049?mt=8"
			}
		}
	}
</script>

<style scoped="scoped">
	/*****蒙版*****/
	
	.maskcon {
		width: 100%;
		height: 100%;
		top: 0rem;
		left: 0rem;
		position: fixed;
	}
	
	.maskcon>img {
		width: 100%;
		height: 100%;
	}
	
	.downloadmain {
		width: 100%;
		height: 100%;
		background-color: #f4325c;
	}
	
	.downloadimg {
		width: 100%;
		height: 100%;
		z-index: 0;
		overflow: hidden;
	}
	
	.downloadcon {
		position: absolute;
		top: 0rem;
		width: 100%;
		height: 100%;
	}
	
	.compylogo {
		width: 1.66rem;
		height: 1.66rem;
		margin: 0 auto;
		margin-top: 2.6rem;
	}
	
	.compylogo>img {
		width: 100%;
		height: 100%;
	}
	
	.downmodule {
		width: 73%;
		margin: 0 auto;
		margin-top: 4.05rem;
	}
	
	.samebutton {
		width: 100%;
		height: 0.88rem;
		background-color: #FFFFFF;
		border-radius: 0.08rem;
		line-height: 0.88rem;
		color: #FF2040;
		font-size: 0.3rem;
	}
	
	.samebutton:nth-child(2) {
		margin-top: 0.6rem;
	}
	
	.samelogo {
		width: 0.42rem;
		height: 0.42rem;
		display: inline-block;
		margin-left: 1.34rem;
		position: relative;
		top: 0.1rem;
		margin-right: 0.1rem;
	}
	
	.iphoneimg {
		background: url(../assets/iphone.png);
		background-size: 100% 100%;
	}
	
	.androidimg {
		background: url(../assets/android.png);
		background-size: 100%;
	}
</style>